<template>
	<view class="container">
		<view class="rateBox">
			<image class="goodsImage" mode="aspectFill" :src="goodsInfo.pics[0].reduce_image"></image>
			<text>{{goodsInfo.name}}</text>
		</view>
		<view class="rateBox">
			<uv-rate count="5" v-model="rateValue" size="26" @change="rateChange()"></uv-rate>
			<text style="margin-left:20rpx;">{{rateText}}</text>
		</view>
		<textarea v-model="comment" placeholder="请输入评论内容"></textarea>
		<view class="submitBtn" @tap="submitComment">提交评论</view>
		<loading v-if="loading"></loading>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading:false,
				comment: '', // 评论内容
				opt:{},//浏览器参数对象
				rateValue:0,//评价分数
				rateText:'',//评分文字
				goodsInfo:{},//商品信息
			};
		},
		
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getOrderFun();
		},
		
		methods: {
			
			//提交评论事件
			submitComment() {
				if(this.rateValue == 0){
					app.error('请给商品选择评分！');
					return false;
				}
				this.loading = true;
				let _this = this;
				app.post('ApiBusinessProduct/comment', {order_id:_this.opt.orderId,content:_this.comment,score:_this.rateValue}, function (res) {
					_this.loading = false;
					app.error('评论成功!');
					setTimeout(function () {
						app.goback();
					}, 1500);
				});
			},
			
			//评分改变触发
			rateChange(value){
				if(value == 1){this.rateText = '非常差'};
				if(value == 2){this.rateText = '差'};
				if(value == 3){this.rateText = '一般'};
				if(value == 4){this.rateText = '满意'};
				if(value == 5){this.rateText = '非常满意'};
			},
			
			//获取订单数据
			getOrderFun(){
				this.loading = true;
				let _this = this;
				app.get('ApiBusinessProduct/getOrderInfo', {order_id:_this.opt.orderId}, function (res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					}else{
						_this.goodsInfo = res.data.data[0];
					}
				});
			},
		},
	};
</script>

<style>
	.container {
		width: 100%;
		float: left;
		padding: 30rpx;
	}
	
	.rateBox{
		width:100%;
		float:left;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.goodsImage{
		width:90rpx;
		height:90rpx;
		border-radius: 10rpx;
		margin-right:20rpx;
	}

	textarea {
		width: 100%;
		height: 200px;
		padding: 10px;
		border-radius:15rpx;
		background-color: #efefef;
	}
	
	.submitBtn{
		width:100%;
		margin:30rpx 0;
		float:left;
		text-align: center;
		border-radius: 50px;
		background-color: #ff3333;
		color:#fff;
		font-weight: bold;
		line-height: 80rpx;
	}
</style>